import { defineComponent } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import Title from "@/components/Title";
import TitleView from "@/components/TitleView";

import RowView from "@/components/RowView";
import Text from "@/components/Text";
import LabelGroup from "@/components/LabelGroup";
import CardView from "@/components/CardView";
import ListView from "@/components/ListView";
import BrandedGoods from "@/components/BrandedGoods";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import apiTool, { getSize } from "@/command/apiTool";
import BrandDetails from "@/components/BrandDetails";
import { useRequest } from "./request";
import { useRouter } from "vue-router";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import TextView from "@/components/TextView";
import { Divider } from "vant";
import RoundImg from "@/components/RoundImg";
import phoneIcon from "@/assets/image/phone_icon.png";
import { ILabelProps } from "@/components/Label/types";
import DetailedInfo from "@/components/DetailedInfo";

export default defineComponent({
  name: "",
  setup() {
    const router = useRouter();
    const { brandInfo, brandInfoRefrush } = useRequest();
    const render1 = () => {
      return <img src={brandInfo.value.logoUrl} class="w-full h-[206px]" />;
    };
    const render2 = () => {
      const textLables: ILabelProps[] = [
        {
          name: brandInfo.value.majorName + "类别可使用",
          type: "blue",
        },
      ];
      return (
        <DetailedInfo
          {...brandInfo.value}
          types={textLables}
          title={brandInfo.value.name}
          desc={brandInfo.value.address}
          text={brandInfo.value.introduce}
        />
      );
      // return <BrandDetails data={brandInfo.value} />;
    };
    const renderItem = (e: any) => {
      const labels: ILabelProps[] = [
        {
          name: "品牌",
          type: "tagOrange",
        },
      ];
      const textLables: ILabelProps[] = [
        {
          name: e.majorName + "类别可使用",
          type: "blue",
        },
      ];
      const data = [
        {
          name: "",
          value: e.introduce,
          width: "100%",
        },
      ];
      return (
        <div
          class="flex flex-col"
          onClick={() => {
            router.replace(`/brandDetails?id=${e.id}`);
            // brandInfoRefrush.refresh({ id: e.id });
            // 刷新页面
            setTimeout(() => {
              window.location.reload();
            }, 200);
          }}
        >
          <RoundInfo
            labels={labels}
            src={e.logoUrl}
            title={e.name}
            data={data}
            v-slots={{
              bottomLable: () => (
                <LabelGroup data={textLables} class={"mt-[9px]"} />
              ),
            }}
          />
          <GreyBlock class="mt-[12px]">
            <RowView class="justify-between flex-1">
              <RowView>
                <TextView>{e.address}</TextView>
              </RowView>
              <RowView class="text-[12px] flex">
                <Text class="text-[#FE8923] mr-[4px]">{e.useNum}</Text>
                <Text>人最近使用</Text>
              </RowView>
              <RoundImg
                src={phoneIcon}
                onClick={() => {
                  apiTool.phoneClick(e.phone);
                }}
              />
            </RowView>
          </GreyBlock>
          <Divider />
        </div>
      );
    };
    const render3 = () => {
      return (
        <CardView class="mt-[30px]" title="推荐品牌">
          {/* <ListView renderItem={renderItem} /> */}
          {brandInfo.value.list.map((item: any) => {
            return renderItem(item);
            // return <BrandedGoods itemData={item} type="xh" />;
          })}
        </CardView>
      );
    };
    const render4 = () => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "立即申请",
          childClass: "!h-[40px]",
          style: {
            background: "#FFFFFF",
            border: "1px solid #E6E6E6",
            width: getSize(165),
            borderRadius: getSize(25),
            height: getSize(40),
            color: "#333333",
          },
          onClick: () => {
            router.push(`/brandApplication?id=${brandInfo.value.id}`);
          },
        },
        {
          text: "咨询大户",
          childClass: "!h-[40px]",
          style: {
            background: "linear-gradient(90deg, #66D0FF 0%, #3893FF 100%)",
            border: "none",
            width: getSize(165),
            borderRadius: getSize(25),
            height: getSize(40),
          },
          toChatData: {
            to: brandInfo.value.phone,
            name: brandInfo.value.name,
          },
        },
      ];
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px]"
          style={{ boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);" }}
        >
          <ButtonGroupView data={buttons} />
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="品牌详情" childClass="!p-[0px] !pb-[60px]">
          {render1()}
          {render2()}
          {render3()}
          {render4()}
        </PageTitle>
      );
    };
  },
});
